<div id="player"></div>
<script src="https://unpkg.com/griffith-standalone/dist/index.umd.min.js"></script>
<script>
  const target = document.getElementById('player');

  const sources = {
    hd: {
      format: 'm3u8',
      play_url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
    },
    sd: {
      format: 'm3u8',
      play_url: 'https://test-streams.mux.dev/x36xhzz/url_6/193039199_mp4_h264_aac_hq_7.m3u8',
    },
  };

  const props = {
    id: 'test-hls-video',
    title: 'Test HLS Video',
    standalone: true,
    cover: 'https://zhstatic.zhihu.com/cfe/griffith/player.png',
    sources,
    shouldObserveResize: true,
    hiddenTimeline: true,
    hiddenTime: true,
  };
  // 创建播放器
  const player = Griffith.createPlayer(target);

  // 载入视频
  player.render({ ...props });

  // 销毁视频
  // player.dispose()
</script>
